<template>
  <view>
    <view style="margin: 0 20rpx">
      <nut-cell is-link @click="handlerCell">
        <text>运输方式 : {{ formData.value }}</text>
      </nut-cell>
      <view v-show="ormData.value != '自提'" class="container">
        <view class="address">
          <text class="province">{{ address.province }}</text>
        </view>
        <view class="company-info">
          <text class="company-name">{{ address.companyName }}</text>
          <text class="address-detail">{{ address.addressDetail }}</text>
        </view>
        <view class="contact-info">
          <text class="name">{{ address.name }}</text>
          <text class="phone">{{ address.phone }}</text>
        </view>
      </view>
    </view>
    <nut-cascader
      title="运输方式"
      v-model:visible="formData.visible"
      v-model="formData.value"
      @change="handleChange"
      @pathChange="handlePathChange"
      :options="formData.options"
    >
    </nut-cascader>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';

interface Address {
  province: string;
  companyName: string;
  addressDetail: string;
  name: string;
  phone: string;
}

const props = defineProps<{
  addressType: number;
}>();

const emit = defineEmits<{
  (event: 'update:addressType', value: number): void;
  (event: 'update:transport', value: string): void;
}>();

const address = reactive<Address>({
  province: '河北唐山市丰南区黄各庄镇',
  companyName: '惠达卫浴',
  addressDetail: '',
  name: '张三',
  phone: '15103274456',
});

const formData = reactive({
  visible: false,
  value: '自提',
  options: [
    {
      value: '1',
      text: '快递物流',
    },
    {
      value: '2',
      text: '自提',
    },
  ],
});

const handlerCell = () => {
  formData.visible = true;
};

const handleChange = (...args: any[]) => {
  console.log('Change event:', args);
};

const handlePathChange = (data: any) => {
  console.log('Path change event:', data[0].value);
  emit('update:addressType', parseInt(data[0].value));
  emit('update:transport', data[0].text);
};
</script>

<style lang="scss" scoped>
.container {
  background: white;
  padding: 20px;
  .address {
    .province {
      font-size: 16px;
      color: #333;
    }
  }
  .company-info {
    margin-top: 10px;
    .company-name {
      font-size: 18px;
      font-weight: bold;
    }
    .address-detail {
      font-size: 16px;
      color: #666;
    }
  }
  .contact-info {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    .name {
      font-size: 16px;
      color: #333;
    }
    .phone {
      font-size: 16px;
      color: #333;
    }
  }
}
</style>
